import React, { Component } from 'react'
import CodeBlock from '../../components/codeblocks/codeblocks'
import MdEditor from 'react-markdown-editor-lite'
import ReactMarkdown from 'react-markdown'
import 'react-markdown-editor-lite/lib/index.css'
import { Button, Drawer, Form, Input, message, Modal, Space } from 'antd'
import { requestSubmitMsg } from '../../api/message'
import { connect } from 'react-redux'
import QueueAnim from 'rc-queue-anim'

class AddMsg extends Component {
    state = {
        html: '',
        text: '',
        formRef: React.createRef(),
        publishVisible: false,
        teachVisible: false,
        quickStartVisible: false,
        show: true
    }

    submitText (html) {
        if (!this.state.text) {
            message.warn('您没有输入任何内容')
            return
        }
        this.setState({
            publishVisible: true
        })
        console.log(html)
    }

    onClose () {
        this.state.formRef.current.resetFields()
        this.setState({
            publishVisible: false
        })
    }

    teachMarkdown () {
        if (localStorage.getItem('quickstart')) {
            this.setState({
                quickStartVisible: true
            })
            return
        }
        this.setState({
            teachVisible: true
        })
    }

    quickStart () {
        this.setState({
            teachVisible: false
        })
        setTimeout(() => {
            this.setState({
                quickStartVisible: true
            })
        }, 500)
    }

    quickStartCancel () {
        this.setState({
            quickStartVisible: false
        })
    }

    noTip () {
        localStorage.setItem('quickstart', true)
        this.setState({
            teachVisible: false
        })
    }

    onCancel () {
        this.setState({
            teachVisible: false
        })
    }

    onFinish (values) {
        let {
            title,
            description,
            html
        } = { ...values, html: this.state.html }
        requestSubmitMsg(title, description, html).then(res => {
            message.success(res.msg)
            this.state.formRef.current.resetFields()
        })
    }

    render () {
        const element = <Space direction={'vertical'} style={{ width: '100%' }}>
            <Space>
                <Button type={'primary'} onClick={this.submitText.bind(this, this.state.html)}>提交</Button>
                <Button onClick={this.teachMarkdown.bind(this)}>使用指南</Button>
            </Space>
            <MdEditor
                style={{ width: '100%', height: window.innerHeight - 250 }}
                renderHTML={(text) => {
                    return (
                        <ReactMarkdown id="md-me" children={text} skipHtml={false} components={{
                            code ({ node, inline, className, children, ...props }) {
                                const match = /language-(\w+)/.exec(className || '')
                                return !inline && match ? (
                                    <CodeBlock language={match[1]} value={String(children).replace(/\n$/, '')}/>
                                ) : (
                                    <code className={className} {...props}>
                                        {children}
                                    </code>
                                )
                            }
                        }}/>
                    )
                }}
                onChange={({ html, text }) => {
                    // console.log('handleEditorChange', html, text);
                    const el = document.querySelector('.html-wrap')
                    if (text.indexOf('```html') < 0) {
                        this.setState({
                            html: el.innerHTML.replace(/&lt;/g, '<').replace(/&gt;/g, '>'),
                            text
                        })
                    } else {
                        this.setState({
                            html: el.innerHTML,
                            text
                        })
                    }
                }}>
            </MdEditor>
            <Modal visible={this.state.teachVisible} okText="开始学习" cancelText="算了" onOk={this.quickStart.bind(this)}
                   onCancel={this.onCancel.bind(this)} title="学习markdown">
                markdown是一种简单快捷的文本语法，使用它可以轻松编辑微信公众号的文章，如果你想学习它，我们准备了一个教程，1分钟即可快速上手。<br/>
                {/*eslint-disable-next-line*/}
                <a style={{ textDecoration: 'underline' }} onClick={this.noTip.bind(this)}>不再提示</a>
            </Modal>
            <Modal width={800} visible={this.state.quickStartVisible} footer={null}
                   onCancel={this.quickStartCancel.bind(this)}>
                <div
                    dangerouslySetInnerHTML={{ __html: `<iframe src="https://www.jianshu.com/p/335db5716248" width="800" height="667"></iframe>` }}
                    style={{ overflow: 'hidden' }}/>
            </Modal>
            <Drawer width={500} title="请填写标题" placement="right" onClose={this.onClose.bind(this)}
                    visible={this.state.publishVisible}>
                <Form
                    name="basic"
                    labelCol={{ span: 4 }}
                    onFinish={this.onFinish.bind(this)}
                    autoComplete="off"
                    ref={this.state.formRef}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{ required: true, message: '请输入主标题' }]}
                    >
                        <Input placeholder="请输入标题"/>
                    </Form.Item>
                    <Form.Item
                        label="描述"
                        name="description"
                        rules={[{ required: true, message: '请输入描述信息' }]}
                    >
                        <Input placeholder="请输入描述信息"/>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Button type="primary" htmlType="submit">
                            发布消息
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </Space>

        return (
            <QueueAnim className="demo-content" key="demo">
                {this.props.show ? <div className="demo-tbody" key="a">{element}</div> : null}
            </QueueAnim>
        )
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(AddMsg)
